<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<!-- th:fragment 定义需要引入的代码块，该div包含的内容即为引用的公共内容 -->
<div th:fragment="aside">
    <aside class="product-quick-view-modal">
        <div class="product-quick-view-inner">
            <div class="product-quick-view-content">
                <button type="button" class="btn-close">
                    <span class="close-icon"><i class="fa fa-close"></i></span>
                </button>
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-12">
                        <div class="thumb">
                            <img th:src="@{/user/img/shop/quick-view1.jpg}" alt="Alan-Shop">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-12">
                        <div class="content">
                            <h4 class="title">Meta Slevless Dress</h4>
                            <div class="prices">
                                <del class="price-old">$85.00</del>
                                <span class="price">$70.00</span>
                            </div>
                            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,</p>
                            <div class="quick-view-select">
                                <div class="quick-view-select-item">
                                    <label for="forSizes" class="form-label">Size:</label>
                                    <select class="form-select" id="forSizes" required>
                                        <option selected value="">s</option>
                                        <option>m</option>
                                        <option>l</option>
                                        <option>xl</option>
                                    </select>
                                </div>
                                <div class="quick-view-select-item">
                                    <label for="forColors" class="form-label">Color:</label>
                                    <select class="form-select" id="forColors" required>
                                        <option selected value="">red</option>
                                        <option>green</option>
                                        <option>blue</option>
                                        <option>yellow</option>
                                        <option>white</option>
                                    </select>
                                </div>
                            </div>
                            <div class="action-top">
                                <div class="pro-qty">
                                    <input type="text" id="quantity4" title="Quantity" value="1" />
                                </div>
                                <button class="btn btn-black">Add to cart</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="canvas-overlay"></div>
    </aside>
    <aside class="off-canvas-wrapper">
        <div class="off-canvas-inner">
            <div class="off-canvas-overlay"></div>
            <!-- Start Off Canvas Content Wrapper -->
            <div class="off-canvas-content">
                <!-- Off Canvas Header -->
                <div class="off-canvas-header">
                    <div class="close-action">
                        <button class="btn-menu-close">menu <i class="fa fa-chevron-left"></i></button>
                    </div>
                </div>

                <div class="off-canvas-item">
                    <!-- Start Mobile Menu Wrapper -->
                    <div class="res-mobile-menu menu-active-one">
                        <!-- Note Content Auto Generate By Jquery From Main Menu -->
                    </div>
                    <!-- End Mobile Menu Wrapper -->
                </div>
            </div>
            <!-- End Off Canvas Content Wrapper -->
        </div>
    </aside>
</div>

</html>


